<script lang="ts" setup>
import { ref, reactive, defineAsyncComponent, onActivated } from 'vue'
import { queryStoreProduct } from '@/api/store'
import { queryStoreProductTableCol } from '@/api/store/types/store'
import { getToken } from '@/utils/cache/cookies'
import LongRentTermTable from '@/components/table/LongRentTermTable.vue'
import { useRoute } from 'vue-router'
import { DepositType, RentTimeType } from '@/types/enum'
import { FormInstance } from 'element-plus'
const route = useRoute()
interface Form {
  storeId: string | number
  depositType: DepositType | ''
  rentTime: RentTimeType | ''
}
const form = reactive<Form>({
  storeId: route.query.storeId as string,
  depositType: '',
  rentTime: ''
})
const formRef = ref<FormInstance | null>(null)
const data = reactive<queryStoreProductTableCol[]>([])
const loading = ref<boolean>(false)
const getData = async () => {
  try {
    loading.value = true
    const res = await queryStoreProduct({
      storeId: route.query.storeId as string,
      pageNum: 1,
      pageSize: 10,
      token: getToken() ?? '',
      rentTime: form.rentTime,
      depositType: form.depositType
    })
    if (res.statusCode === '0') {
      Object.assign(data, res.data)
    }
    loading.value = false
  } catch (error) {
    console.error(error)
    loading.value = false
  }
}
const setId = (id: string) => {
  form.storeId = id
}
defineExpose({ getData, setId })
/**
 * 查看更多信息
 */
const BikeRentTermInfoDialog = defineAsyncComponent(
  () => import('@/components/dialog/BikeRentTermInfo.vue')
)
const BikeRentTermInfoDialogRef = ref<InstanceType<typeof BikeRentTermInfoDialog> | null>(null)
const handleShowMoreInfo = async (row: queryStoreProductTableCol) => {
  BikeRentTermInfoDialogRef.value?.setData(row.storeId.toString(), row.name)
  BikeRentTermInfoDialogRef.value?.open()
}
const handleFormSearch = () => {
  getData()
}
const reset = () => {
  formRef.value?.resetFields()
}
onActivated(() => {
  form.storeId = route.query.storeId as string
})
</script>

<template>
  <el-form :model="form" inline ref="formRef">
    <el-form-item label="可租周期" prop="rentTime">
      <el-select v-model="form.rentTime" style="width: 120px">
        <el-option label="不限" value="" />
        <el-option label="日租" value="1d" />
        <el-option label="周租" value="7d" />
        <el-option label="月租" value="30d" />
        <el-option label="季租" value="90d" />
        <el-option label="半年租" value="180d" />
        <el-option label="年租" value="360d" />
      </el-select>
    </el-form-item>
    <el-form-item label="免押类型" prop="depositType">
      <el-select v-model="form.depositType" style="width: 120px">
        <el-option label="不限" value="" />
        <el-option label="芝麻信用分" value="AlipayCredit" />
        <el-option label="微信支付分" value="WeChatCredit" />
        <el-option label="不支持免押" value="Deposit" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleFormSearch">查询</el-button>
      <el-button plain @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <long-rent-term-table
    :data="data"
    page="operatorsinfo"
    @show="handleShowMoreInfo"
    :loading="loading"
  />
  <bike-rent-term-info-dialog ref="BikeRentTermInfoDialogRef" />
</template>

<style scoped></style>
